@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');

body, html {
   padding: 0;
   margin: 0;
   overflow: hidden;
}
body {
   background-color: #131313;
}
.hidden {
   display: none !important;
}
* {
   user-select: none;
}
.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}


hgroup {
   font-family: "Abril Fatface";
   position: absolute;
   top: 1rem;
   left: 50%;
   transform: translateX(-50%);
   display: table;
}
h1 {
   color: rgb(253, 232, 188);
   font-size: 1.4rem;
   text-shadow: 0 0 2px #000, 0 0 4px #000, 0 0 6px #000, 0 0 8px #000;
   text-align: center;
   margin: 0;
}
h1::first-letter {
   font-size: 1.8rem;
}
h1::before, h1::after {
   --size: 28px;
   content: "";
   width: var(--size);
   height: var(--size);
   background-image: url(../images/code-feather.png);
   background-size: var(--size) var(--size);
   display: inline-block;
   opacity: 0.6;
   transform: translateY(8px);
}
h1::after {
   transform: translateY(8px) scaleX(-1);
}
h2 {
   font-size: 1.2rem;
   text-align: center;
   color: rgba(233, 194, 135, 0.9);
   letter-spacing: 0.075rem;
   margin: 0.4rem 0 0;
}
h2::before {
   content: "PACKETS: ";
}


/* MALWARE */
.malware {
   --size: 48px;
   width: var(--size);
   height: var(--size);  
   padding: 0.5rem;
   border: 3px solid #000;
   border-radius: 100%;
   margin: 8px 0 0;
   transform: translate(-50%, -50%);
   position: absolute;
}
.malware:not(.unlocked) {
   background-image: radial-gradient(#222 40%, #000);
   box-shadow: 0 0 4px 4px #000;
   cursor: pointer;
}
.malware.unlocked {
   background-image: radial-gradient(#444 40%, #000);
   box-shadow: 0 0 6px 10px #000;
}
.malware-title {
   font: 1rem "Playfair Display";
   white-space: nowrap;
   position: absolute;
   top: -1.2rem;
   left: 50%;
   transform: translateX(-50%);
   text-shadow: 0 0 5px black;
   pointer-events: none;
}
.malware:hover .malware-title {
   animation: titleOut 0.3s forwards linear;
}
@keyframes titleOut {
   0% {
      opacity: 1;
      top: -1.2rem;
   }
   100% {
      opacity: 0;
      top: 0;
   }
}
.malware:not(:hover) .malware-title {
   animation: titleIn 0.3s forwards ease-in-out;
}
@keyframes titleIn {
   0% {
      opacity: 0;
      top: 0;
   }
   100% {
      opacity: 1;
      top: -1.2rem;
   }
}
.malware.unlocked .malware-title {
   font-weight: 900;
   color: rgba(255, 255, 255, 0.7);
}
.malware:not(.unlocked) .malware-title {
   color: rgba(200, 200, 170, 0.4);
}
.malware img {
   width: var(--size);
   height: var(--size);
   border-radius: 100%;
   margin: 0;
   pointer-events: none;
}
.malware:not(.unlocked) img {
   opacity: 0.5;
}
.malware.unlocked img {
   box-shadow: 0 0 3px 3px rgba(0, 255, 0, 0.3);
}

/* CONNECTIONS */
.connection {
   --size: 12em;
   height: 10px;
   background-image: url(../gifs/binary-code.gif);
   background-size: var(--size) var(--size);
   position: absolute;
   transform: translateY(-50%);
   transform-origin: 0% 0%;
   animation: movePos 2s infinite forwards linear;
   box-shadow: 0 0 5px 5px rgba(255, 0, 0, 0.1);
}
.connection:not(.unlocked) {
   opacity: 0.4;
}
.connection.unlocked {
   opacity: 1;
}
@keyframes movePos {
   0% {
      background-position: 0% 3.5%;
   }
   100% {
      background-position: 100% 3.5%;
   }
}

/* TOOLTIPS */
#tooltips {
   text-align: justify;
   max-width: 20em;
   font-family: "Playfair Display";
   background-color: #222;
   padding: 0 0.5em;
   border: 3px solid;
   border-radius: 3px;
   display: inline-block;
   position: absolute;
   box-shadow: 0px 0px 15px 10px #111 inset, 0 2px 10px 5px #000;
   transform: translate(-50%, -100%);
   z-index: 2;
   opacity: 0;
}
#tooltips:not(.hidden) {
   animation: tooltipsIn 0.25s forwards ease-in-out;
}
#tooltips.hidden {
   animation: tooltipsIn 0.25s reverse ease-in-out;
}
@keyframes tooltipsIn {
   0% {
      opacity: 0;
      margin-top: 0.4rem;
   }
   100% {
      opacity: 1;
      margin-top: 0;
   }
}
#tooltips.selected {
    border-color: rgb(255, 215, 84);
}
#tooltips:not(.selected) {
    border-color: #444;
}
#tooltips-cost-img {
    color: white;
    text-align: center;
    width: 24px;
    height: 24px;
    background-image: url(../images/packet.png);
    background-size: 100% auto;
    margin-left: 0.8em;
    margin-top: 0.4em;
    border-radius: 100%;
    box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.8) inset;
    float: right;
}
#tooltips-name {
    color: #fff;
    font-size: 1em;
    font-weight: 900;
    margin: 0.5em 0 0;
    white-space: nowrap;
    float: left;
}
#tooltips-points {
    color: #d5d5d5;
    font-size: 0.95em;
}
#tooltips-special {
    color: #bbb;
    font-size: 0.9em;
}
#tooltips-description {
    color: #888;
    font-size: 0.85em;
}
#tooltips-unlock-type {
    font-weight: 600;
    font-size: 0.75em;
    font-style: italic;
    color: #888;
    margin: 0;
}

/* CODE */
.code {
   color: rgb(0, 255, 0);
   position: absolute;
   transform: translate(-50%, -50%);
   pointer-events: none;
}
.code.red {
   color: rgb(255, 0, 0);
}

#return-button {
   color: rgb(255, 253, 228);
   font-weight: 400;
   font-size: 1rem;
   font-family: "Abril Fatface";
   background-color: rgb(255, 84, 17);
   box-shadow: 0 0 0 1px rgb(184, 128, 54), 0 0 6px 1px rgba(0, 0, 0, 0.4) inset;
   border: 1px solid rgb(255, 253, 228);
   padding: 0 1rem 0.2rem;
   cursor: pointer;
   display: inline-block;
   position: absolute;
   bottom: 1rem;
   left: 50%;
   transform: translateX(-50%);
}
#return-button::first-letter {
   font-size: 1.3rem;
}
#return-button:hover {
   box-shadow: 0 0 0 1px rgb(184, 128, 54);
}
#return-button:active {
   color: rgb(235, 233, 210);
   border-color: rgb(235, 233, 210);
   background-color: rgb(226, 81, 24);
   box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3) inset, 0 0 8px 1px #000;
}